<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
		
		<view class="additem-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false"	>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<template #top>
					<view class=""  >
						<u-navbar :border-bottom="false" :background="{background:'#fff'}" title="添加商品" :title-size="36" :title-bold="true" :title-color="textColor" >
						</u-navbar>
						<view class="u-p-l-35 u-p-r-35 u-p-t-20 ">
							<u-search :searchIconFlag="true" v-model="searchValue" input-align="center" placeholder="商品名称" height="70" :border-color="'#FFBB1A'" :bg-color="'#fff'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
						</view>
					</view>
				</template>
				<view class="history-container u-p-l-35 u-p-r-35">
					<u-checkbox-group style="width:100%"  :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
						<u-checkbox 
							:noneClass="isCheckShow"
							:labelClass="true"
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in dataList" :key="item.id" 
							:name="index"
							style="width: 100%; background-color: #fff;border-bottom: 1px solid #eaeaea;"
						>
								<view class="history-item u-flex u-p-t-30 u-p-b-30 u-p-l-20" >
									<image :src="item.url" class="u-m-l-14" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
									<view class="" style="flex: 1;overflow: hidden;">
										<view class="u-font-30 u-line-1" style="font-weight: 500;">{{item.name}}</view>
										<view class="u-flex u-row-between">
											<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
												{{item.specification}}
											</view>
											<view class=""  v-if="item.checked">
												<input  type="number" v-model="item.count" 
												class="count-input"
												placeholder="填写批次数"
												placeholder-style="fontSize: 22rpx"
												 style="">
											</view>
											<!--  -->
										</view>
									</view>
								</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<view slot="bottom" style="border-top: 1px solid #eaeaea;">
					<view v-if="!isCheckShow">
						<!-- bottom的内容 -->
						<view class="history-bottom u-p-r-35 u-p-l-35 u-flex u-col-center u-row-between">
							<u-checkbox class="u-flex" :icon-size="20" :size="40" :name="'全选'" v-model="allSelect" shape="circle" label-size="24rpx" :active-color="themeColor" @change="checkedAll">
								<text style="font-weight: bolder;">全选</text>
								<!-- <text style="font-weight: bolder;"  class="u-m-l-20">已选  {{chooseList.length}}  个品</text> -->
							</u-checkbox>
							<button type="default" class="history-del_btn" @click="delHistoryFn">添加</button>
						</view>
					</view>
				</view>
			</z-paging>
			
		</view>
	
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				isCheckShow:false,
				allSelect:false,
				searchValue:'',
			}
		},
		onLoad(options) {
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			chooseList(){
				let ary = [];
				this.dataList.forEach(item=>{
					if(item.checked){
						ary.push({
							itemName: item.name,
							dateOfManufacture: '',
							specification: item.specification,
							itemResourceUrl: item.url,
							itemId:item.id,
							count:item.count
						})
					};
				})
				console.log(ary);
				return ary;
			}
		},
		methods: {
			reloadFn(){
				this.$refs.paging.reload();
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.dataList[e.name].checked = e.value;
				this.allSelect = this.dataList.every(item=>{return item.checked === true});
			},
			// 点击管理按钮开始编辑
			editBeginFn(){
				this.isCheckShow = false;
			},
			// 结束编辑
			editEndFn(){
				this.isCheckShow = true;
				this.allSelect = false;
				this.checkedAll({value:this.allSelect});
			},
			// 全选
			checkedAll(e) {
				this.dataList.map(val => {
					val.checked = e.value;
				});
			},
			async delHistoryFn(){
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				if(this.chooseList.length == 0){
					uni.hideLoading({});
					this.$u.toast('至少选择一个商品');
					return false;
				}
				let pricePass = this.chooseList.every(item=>{
					return item.count!==''&&item.count!=null;
				})
				if(!pricePass){
					uni.hideLoading({});
					this.$u.toast('选择商品项中批次不得有空值');
					return false;
				}
				 let ary = [];
				  this.chooseList.forEach(item => {
					for (let i = 0; i < item.count; i++){
						ary.push(item);
					}
				  })
				// let pages = getCurrentPages(); // 当前页面
				// let beforePage = pages[pages.length - 2]; // 上一页
				// beforePage._data.refreshIfNeeded = true;
				uni.$emit('sendChooseItem',ary)
				uni.navigateBack({
					delta: 1
				})
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					isDeleted:false,
					shopId:this.storeShop.id
				}
					
				if(this.searchValue != ''){
					params.name = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.post('api/BrandOwner/GetItemsByPage',params );
				uni.hideLoading({})
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						item.count = 1;
						return item
					});
					this.$refs.paging.complete(ary);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.additem-content {
		height: 100%;
		background-color: #fff;
		
	}
	// .history-container{
	// 	box-sizing: border-box;
	// 	.history-item{
	// 		width: 100%;
	// 		background-color: #fff;
	// 		border-radius: 10rpx;
	// 		overflow: hidden;
	// 	}
	// }
	.count-input{
		border: 1px solid #999;border-radius: 5rpx; text-align: center;width: 150rpx;height: 50rpx;
	}
	::v-deep .count-input::placeholder{
		font-size: 10rpx;
	}
	.history-bottom{
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		.history-del_btn{
			width: 200rpx;
			height: 80rpx;
			background: #ffbb1a;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			margin: 0;
		}
	}
	
</style>
